<template>
	<div class="personal-recom mtop-60">
		<div class="swiper-wrapper">
			<!-- 实现图片轮播 -->
			<el-carousel :interval="4000" :type="bannerType" :height="bannerHeight + 'px'" >
				<el-carousel-item v-for="item in imgList" :key="item.imageUrl">
					<img class="img img-h swiper-img" :src="item.imageUrl" @click="open(item.url)" />
				</el-carousel-item>
			</el-carousel>
		</div>

		<div class="play-list" v-if="!isLogin">

			<h2 class="font-20 font-bold pointer w-150" @click="$router.push('playlist')">
				热门推荐 <i class="iconfont icon-youjiantou"></i>
			</h2>
			<ImgList @clickImg="toPlayListDetail" :list="recSongList" type="playlist">
				<template v-slot="{ item }">
					<div class="text-hidden">
						{{ item.name }}
					</div>
				</template>
			</ImgList>
		</div>
		<!-- 登录后显示推荐歌单 -->
		<div class="play-list" v-else>

			<h2 class="font-20 font-bold pointer w-150" @click="$router.push('playlist')">
				推荐歌单 <i class="iconfont icon-youjiantou"></i>
			</h2>
			<ImgList @clickImg="toPlayListDetail" :list="recommendList" type="playlist">
				<template v-slot="{ item }">
					<div class="text-hidden">
						{{ item.name }}
					</div>
				</template>
			</ImgList>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import { getBanner } from '@/api/api_other'
	import { getPersonalized, getRecommend } from '@/api/api_playlist'
	import ImgList from '@/components/list/ImgList.vue'
	export default {
		components: {
			ImgList
		},
		data() {
			return {
				imgList: [],
				recSongList: [],
				recommendList: [],

			}
		},
		created() {
			this.getImgList()
			this.getRecSongList(10)
		},
		watch: {
			isLogin: {
				immediate: true,
				handler() {
					if (this.isLogin) this.getRecommend()
				}
			}
		},
		computed: {
			...mapState(['bannerHeight', 'isLogin', 'isPhone', 'bannerType']),
			bannerHeight() {
				return this.isPhone ? 120 : 230
			},
			bannerType() {
				return this.isPhone ? '' : 'card'
			}
		},
		methods: {
			/* 个性推荐页 */
			// 轮播图
			async getImgList() {
				const res = await getBanner()
				if (res.code !== 200) return
				this.imgList = Object.freeze(res.banners)
			},
			// 获取热门推荐歌单 未登录时
			async getRecSongList(limit) {
				if (this.isLogin) return
				const res = await getPersonalized(limit)
				if (res.code !== 200) return
				console.log(res)
				this.recSongList = Object.freeze(res.result)
			},
			/* 获取推荐歌单 登陆后 */
			async getRecommend() {
				if (!this.isLogin) return
				const res = await getRecommend()
				if (res.code !== 200) return
				console.log(res)
				res.recommend.forEach((item) => {
					item.playCount = item.playcount
					this.recommendList.push(Object.freeze(item))
				})
			},
			open(url) {
				console.log(url)
				if (url !== null) window.open(url)
			},
			toPlayListDetail(id) {
				if (typeof id === 'number')
					this.$router.push({
						path: '/playlistdetail/' + id
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.swiper-img {
		border-radius: 8px;
	}

	/deep/ .el-carousel__button {
		width: 8px;
		height: 8px;
		border-radius: 50%;
	}
</style>、
